<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 模块列表</el-breadcrumb-item>
                <el-breadcrumb-item>基本信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
          <el-card class="box-card">
            <div slot="header" class="clearfix card-header">
              <span>模块基本信息</span>
              <el-button type="primary" icon="el-icon-back" style="float: right;" @click="goBack"></el-button>
            </div>
            <el-form  label-width="80px">
                <el-row>
                  <el-form-item label="模块名称">
                    {{module.fdName}}
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-col :span="12">
                      <el-form-item  label="模块路径" >
                        {{module.fdModulePath}}
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item  label="创建时间" >
                        {{module.fdCreateTime}}
                      </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-form-item label="备注">
                    {{module.fdRemark}}
                  </el-form-item>
                </el-row>
            </el-form>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix card-header">
              <span>数据库表</span>
              <el-button  icon="el-icon-plus" type="primary" plain style="float: right;" @click="addTableHandler"></el-button>
            </div>
            <el-table
              :data="tableData"
              border
              :header-cell-style="{background:'#F5F7FA'}"
              style="width: 100%" >
              <el-table-column
                prop="fdName"
                label="名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="fdTableName"
                label="表名称"
                width="250">
              </el-table-column>
              <el-table-column
                prop="fdModelName"
                label="模型名称">
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button  type="text" @click="handleTableView(scope.row)"><i class="el-icon-lx-attention"/>查看</el-button>
                    <el-button  type="text" @click="handleTableEdit(scope.$index, scope.row)"><i class="el-icon-lx-copy"/>修改</el-button>
                    <el-button  type="text" @click="handleTableDelete(scope.$index,scope.row)"><i class="el-icon-lx-deletefill"/>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
        <!-- 弹出框 -->
        <el-dialog  :visible.sync="tableVisible" width="80%" :fullscreen="true" :lock-scroll="false" @close='closeDialog'>
            <el-form ref="form" :model="form" label-width="80px">
              <el-row>
                  <el-col :span="8">
                      <el-form-item label="名称" required>
                        <el-input class="input" v-model="form.fdName" ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="表名称" required>
                          <el-input class="input" v-model="form.fdTableName" @change="toCamel('fdModelName', $event)"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="模型名称" required>
                        <el-input class="input" v-model="form.fdModelName" :disabled="true"></el-input>
                      </el-form-item>
                    </el-col>
              </el-row>
              <el-row>
                    <el-col :span="24">
                      <el-table style="width:100%" :data="form.fields" border  :header-cell-style="{background:'#F5F7FA'}" >
                        <el-table-column type="index" label="序号" align="center" width="50"/>
                        <el-table-column prop="fdColumnName"  label="字段"  align="center"  :render-header="requireLabel">
                          <template slot-scope="scope">
                            <el-form-item label-width="0px" :prop="'fields.'+scope.$index+'.fdColumnName'" :rules='rules.fdColumnName'>
                              <el-input v-model="scope.row.fdColumnName" @change="fieldsToCamel('fdModelName',scope.$index,scope.row.fdColumnName)"></el-input>
                            </el-form-item>
                          </template>
                        </el-table-column>
                        <el-table-column  align="center" label="名称" >
                          <template slot-scope="scope">
                              <el-form-item label-width="0px" :rules='rules.fdName'>
                                <el-input v-model="scope.row.fdName" ></el-input>
                              </el-form-item>
                          </template>
                        </el-table-column>
                        <el-table-column  align="center" label="模型名" >
                          <template slot-scope="scope">
                              <el-form-item label-width="0px"  >
                                <el-input v-model="scope.row.fdModelName" :disabled="true"></el-input>
                              </el-form-item>
                          </template>
                        </el-table-column>
                        <el-table-column  label="类型" align="center" width="150" >
                          <template slot-scope="scope">
                            <el-form-item label-width="0px"  >
                              <el-select v-model="scope.row.fdColumnType" placeholder="请选择">
                                <el-option
                                  v-for="item in columnOptions"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </template>
                        </el-table-column>
                        <el-table-column  label="长度" align="center" width="150" :render-header="requireLabel">
                          <template slot-scope="scope">
                            <el-form-item label-width="0px"  :prop="'fields.' + scope.$index + '.fdLength'" :rules='rules.fdLength'>
                              <el-input-number size="mini" :min="1" :max="3000" v-model="scope.row.fdLength"></el-input-number>
                            </el-form-item>
                          </template>
                        </el-table-column>
                        <el-table-column  align="center" label="是否必填" width="80">
                          <template slot-scope="scope">
                            <el-form-item label-width="0px"  >
                              <el-switch v-model="scope.row.fdIsRequired"/>
                            </el-form-item>
                          </template>
                        </el-table-column>
                        <el-table-column  align="center" label="主键" width="80">
                          <template slot-scope="scope">
                            <el-form-item label-width="0px"  >
                              <el-switch v-model="scope.row.fdIsPrimaryKey" @change="handleChangePrimaryKey(scope.$index)"/>
                            </el-form-item>
                          </template>
                        </el-table-column>
                        <el-table-column label="操作"  align="center" width="150">
                            <template slot-scope="scope">
                                <el-button type="text" @click="handleCopy(scope.$index, scope.row)"><i class="el-icon-lx-copy"/>复制</el-button>
                                <el-button type="text" @click="handleDelete(scope.$index)"><i class="el-icon-lx-deletefill"/>删除</el-button>
                            </template>
                        </el-table-column>
                      </el-table>
                      <div class="column-buttons">
                        <center>
                          <el-button type="primary" round icon="el-icon-lx-add" @click="handleAdd">新增</el-button>
                        </center>
                      </div>
                    </el-col>
              </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="tableVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSave">确 定</el-button>
            </span>
        </el-dialog>
        <el-drawer
          title="查看表字段"
          :visible.sync="table"
          direction="rtl"
          size="50%">
          <el-card class="box-card">
            <el-form  label-width="80px">
                <el-row>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="名称">
                      {{form.fdName}}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item  label="表名" >
                        {{form.fdTableName}}
                      </el-form-item>
                  </el-col>
                </el-row>
            </el-form>
          </el-card>
          <el-row>
            <el-col :span="24">
              <el-table style="width:100%" :data="form.fields" border height="550" :header-cell-style="{background:'#F5F7FA'}" >
                <el-table-column type="index" label="序号" align="center" width="50"/>
                <el-table-column prop="fdColumnName"  label="sql字段"  align="center">
                  <template slot-scope="scope">
                      {{scope.row.fdColumnName}}
                  </template>
                </el-table-column>
                <el-table-column  align="center" label="名称" >
                  <template slot-scope="scope">
                        {{scope.row.fdName}}
                  </template>
                </el-table-column>
                <el-table-column  align="center" label="模型名" >
                  <template slot-scope="scope">
                        {{scope.row.fdModelName}}
                  </template>
                </el-table-column>
                <el-table-column  label="类型" align="center" width="150" >
                  <template slot-scope="scope">
                      <el-select v-model="scope.row.fdColumnType" :disabled="true">
                        <el-option
                          v-for="item in columnOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </template>
                </el-table-column>
                <el-table-column  label="长度" align="center" width="150" >
                  <template slot-scope="scope">
                      {{scope.row.fdLength}}
                  </template>
                </el-table-column>
                <el-table-column  align="center" label="是否必填" width="80">
                  <template slot-scope="scope">
                      {{scope.row.fdIsRequired?'是':'否'}}
                  </template>
                </el-table-column>
                <el-table-column  align="center" label="主键" width="80">
                  <template slot-scope="scope">
                      {{scope.row.fdIsPrimaryKey?'是':'否'}}
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-drawer>
    </div>
    
</template>

<script>
import requireLabel from '@/utils/form/requireLabel'
import formUtils from '@/utils/formUtils';
import dateUtils from '@/utils/dateUtils';
    export default {
        name: 'codeGenerateTable',
        data: function(){
            return {
              module:{
                fdId:'',
                fdName:'',
                fdModulePath:'',
                fdCreateTime:'',
                fdRemark:'',
              },
              form: {
                fdId: '',
                fdTableName: '',
                fdName: '',
                fdModelName: '',
                fields:[]
              },
              columnOptions:[
                {
                  value: 'String',
                  label: '字符'
                },
                {
                  value: 'Integer',
                  label: '整数型数字'
                },
                {
                  value: 'Double',
                  label: '浮点型数字'
                },
                {
                  value: 'Date',
                  label: '日期'
                },
                {
                  value: 'Boolean',
                  label: '布尔'
                }
                
              ],
              rules: {
                fdColumnName:[{required:true,message:"字段不能为空",trigger:"blur"}],
                fdName:[{required:true,message:"字段不能为空",trigger:"blur"}],
                fdLength:[{required:true,message:"长度不能为空",trigger:"blur"}]
              },
              tableData: [],
              tableVisible:false,
              table:false
            }
        },
        created(){
          this.initParam();
          this.getTableData();
        },
        methods: {
            goBack() {
               history.go(-1);
            },
            initParam() {
              let params = this.$route.params.moduleObj;
              if(typeof params === 'undefined'){
                this.$router.push('/code/generate');
              }else{
                this.module.fdId = params.fdId;
                this.module.fdName = params.fdName;
                this.module.fdModulePath = params.fdModulePath;
                this.module.fdCreateTime = dateUtils.format(params.fdCreateTime);
                this.module.fdRemark = params.fdRemark;
              }
              
            },
            getTableData() {
              this.$fetch('/api/code/generate/code_generate_table_info/tables',{
                    fdModuleId: this.module.fdId
                }).then((res) => {
                    this.tableData = res.data;
                });
            },
            getField() {
              return {
                fdId: '',
                fdColumnName:'fd_',
                fdName:'',
                fdColumnType:'String',
                fdLength:'36',
                fdIsRequired:false,
                fdModelName:'',
                fdIsPrimaryKey:false,
                fdOrder:this.form.fields.length
              }
            },
            addTableHandler() {
              this.tableVisible = true;
              if(this.form.fields.length == 0){
                let fdIdObj = {
                  fdId: '',
                  fdColumnName:'fd_id',
                  fdColumnType:'String',
                  fdName:'ID',
                  fdLength:'36',
                  fdIsRequired:true,
                  fdModelName:'fdId',
                  fdIsPrimaryKey:true,
                  fdOrder:0
                };
                let fdCreateTimeObj = {
                  fdId: '',
                  fdColumnName:'fd_create_time',
                  fdName:'创建时间',
                  fdColumnType:'Date',
                  fdLength:'36',
                  fdIsRequired:true,
                  fdModelName:'fdCreateTime',
                  fdIsPrimaryKey:false,
                  fdOrder:1
                };
                this.form.fields.push(fdIdObj);
                this.form.fields.push(fdCreateTimeObj);
                this.handleAdd();
              }
            },
            handleAdd() {
              let field = this.getField();
              this.form.fields.push(field);
              
            },
            handleTableEdit(index,row) {
              let fdId = row.fdId;
              this.$fetch('/api/code/generate/code_generate_table_info',{
                  id:row.fdId
              }).then((res) => {
                this.form.fields.push(this.getField())
                formUtils.convertToForm(res.data,this.form);
                console.log(this.form);
                this.tableVisible = true;
              });
            },
            handleTableDelete(index,row) {
              console.log(row.fdId);
              this.$confirm('确认删除这条记录吗?').then(() => {
                
                  this.$delete('/api/code/generate/code_generate_table_info',{
                      id:row.fdId
                  }).then((res) => {
                      this.tableData.splice(index,1)
                      this.$message({type:'success',message:'删除成功!'})
                  });
              }).catch(() => {});
            },
            requireLabel,
            toCamel(targetObj,sourceObj){
              if(formUtils.isNotEmpty(sourceObj)){
                let letter = formUtils.toCamelCase(sourceObj);
                letter = letter.charAt(0).toUpperCase() + letter.slice(1);
                this.$set(this.form,targetObj, letter);
              }
              
            },
            fieldsToCamel(targetObj,index,sourceObj){
                if(formUtils.isNotEmpty(sourceObj)){
                  let letter = formUtils.toCamelCase(sourceObj);
                  this.$set(this.form.fields[index],targetObj, letter);
                }
            },
            handleDelete(index) {
              this.form.fields.splice(index,1)
            },
            handleCopy(index) {
              let o = formUtils.cloneObj(this.form.fields[index])
              o.fdOrder = this.form.fields.length+1;
              this.form.fields.push(o);
            },
            handleSave() {
              let form = formUtils.convertToModel(this.form);
              form.fdModuleId = this.module.fdId;
              this.$post('/api/code/generate/code_generate_table_info',form).then((res) => {
                  if(res.status==1){
                      this.$message.success(res.message);
                      let o = {}
                      o.fdTableName = res.data.fdTableName;
                      o.fdModelName = res.data.fdTableName;
                      o.fdName = res.data.fdName;
                      o.fdId = res.data.fdId;
                      this.getTableData();
                      //清空表
                      this.resetForm();
                      this.tableVisible = false;
                  }else{
                      this.$message.error(res.message);
                  }
              });
            },
            handleChangePrimaryKey(index) {
              this.form.fields.forEach((v,i)=>{
                if(i!=index && v.fdIsPrimaryKey){
                  v.fdIsPrimaryKey = false;
                }
              })
            },
            closeDialog(){
              this.resetForm();
            },
            resetForm(){
              this.form.fdTableName = '';
              this.form.fdName = '';
              this.form.fdModelName = '';
              this.form.fdId = '';
              this.form.fields = [];
            },
            handleTableView(row){
              
              this.$fetch('/api/code/generate/code_generate_table_info',{
                  id:row.fdId
              }).then((res) => {
                this.form.fields.push(this.getField())
                formUtils.convertToForm(res.data,this.form);
                this.table = true;
              });
            }
        }
    }
</script>
<style>
.box-card{
  margin-bottom:15px;
}
.card-header {
  height:20px;
}
.column-buttons{
  margin-top: 20px;
  height:30px;
}
.requiredText{
  color:rgb(192, 181, 181)
}
</style>